<template>
  <div>
    <el-dialog :visible.sync="showPointDialog" :before-close="check" title="编辑" width="80%">
      <div class="content">
        <el-tabs v-model="activeName" stretch :before-leave="getStatus" @tab-click="handleClick">
          <el-tab-pane label="产品基本信息" name="first" class="btnFatcher">
            <el-card class="box-card">
              <el-row>
                <el-col :span="12">
                  <div class="watch required">
                    产品名称：
                    <el-input
                      v-model="name"
                      style="width:40%"
                      size="mini"
                      placeholder="请输入产品名称"
                    />
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="watch required">
                    产品类型：
                    <el-select v-model="productType" style="width:40%" placeholder="请选择" size="mini" @visible-change="isHint">
                      <el-option v-for="item in typeArr" :key="item.typeId" :value="item.typeId" :label="item.typeName" />
                    </el-select>
                  </div>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <div class="watch required">
                    产品类别：
                    <el-select v-model="productCategory" style="width:40% !important" placeholder="请选择" size="mini">
                      <el-option v-for="item in productCategoryArr" :key="item.typeId" :value="item.typeId" :label="item.typeName" />
                    </el-select>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="watch air">
                    &nbsp;&nbsp;&nbsp;排序号：
                    <el-input
                      v-model="sequence"
                      style="width:40% !important"
                      size="mini"
                      placeholder="排序号"
                    />
                  </div>
                </el-col>
              </el-row>
            </el-card>
            <el-card class="box-card1">
              <el-row>
                <el-col :span="24">
                  <div class="watch required">
                    产品所属平台：
                    <el-select v-model="platformListArr" multiple placeholder="请选择" style="width:500px" size="mini">
                      <el-option v-for="item in platformArr" :key="item.idVal" :value="item.idVal" :label="item.powerName" />
                    </el-select>
                  </div>
                </el-col>
                <!-- <el-col :span="12">
                  <div class="watch required">
                    运营商产品标识：
                    <el-input
                      v-model="sum.cpproductId"
                      style="width:200px"
                      size="mini"
                      placeholder="运营商产品标识"
                    />
                    <i v-show="index === (platformList.length - 1)" class="el-icon-circle-plus" @click="addPlat" />
                    <i v-show="index !== 0" class="el-icon-circle-close" @click="reduce(index)" />
                  </div>
                </el-col> -->
              </el-row>
            </el-card>

            <el-card class="box-card1">
              <el-row>
                <el-col :span="24">
                  <div class="watch required">
                    产品所属cp:
                    <el-select
                      v-model="cpList"
                      multiple
                      placeholder="请选择"
                      size="mini"
                      style="width:500px"
                      @change="handle"
                    >
                      <el-option v-for="item in productCp" :key="item.typeId" :value="item.typeId" :label="item.typeName" />
                    </el-select>
                  </div>
                </el-col>
              </el-row>
            </el-card>
            <el-card class="box-card1">
              <el-row>
                <el-col :span="24">
                  <div class="watch textaa">
                    <span>产品描述：</span>
                    <el-input
                      v-model="description"
                      type="textarea"
                      :rows="2"
                      style="width:500px"
                      size="mini"
                      placeholder="产品描述"
                    />
                  </div>
                </el-col>
              </el-row>
            </el-card>
            <el-card class="box-card1">
              <el-row>
                <el-col :span="24" class="imgArr">
                  <div class="productImgWord">产品描述图片：</div>
                  <!-- <div v-for="(item, index) in imageList" :key="index" class="imgList">
                    <img class="imgItem" :src="item.imageUrl">
                    <span class="imgWord">{{ item.imageLogo }}</span>
                  </div> -->
                  <el-upload
                    ref="upload"
                    :action="urlzz"
                    list-type="picture-card"
                    :file-list="showImg"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :on-success="handleSuccess"
                  > <!-- eslint-disable -->
                    <i class="el-icon-plus" />
                  </el-upload>
                </el-col>
                <el-col :span="24">
                  <div class="watch" :class="{ 'required': imgArr.length > 0 }">
                    图片标识：
                    <div v-for="(img, index) in imgArr" :key="index" class="imgArrs">
                      <el-input
                        v-model="img.imageLogo"
                        size="mini"
                        placeholder="图片标识"
                      />
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-card>

            <el-card class="box-card2">
              <el-row v-for="(item, index) in linkList" :key="index">
                <el-col :span="12">
                  <div class="watch">
                    产品链接：
                    <el-input
                      v-model="item.productLink"
                      style="width:200px"
                      size="mini"
                      placeholder="产品链接"
                    />
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="watch">
                    链接标识：
                    <el-input
                      v-model="item.linkIdentifier"
                      style="width:200px"
                      size="mini"
                      placeholder="产品链接"
                    />
                    <i v-show="index === (linkList.length - 1)" class="el-icon-circle-plus" @click="addLink" />
                    <i v-show="index !== 0" class="el-icon-circle-close" @click="reduceLink(index)" />
                  </div>
                </el-col>
              </el-row>
            </el-card>
            <div class="btnArrs">
              <el-button
                type="primary"
                size="small"
                plain
                round
                @click="check()"
              >取消</el-button>
              <el-button
                type="primary"
                size="small"
                round
                @click="next('second', true)"
              >下一步</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="产品资费策略" name="second" class="btnFatcher">
            <div style="margin-bottom: 10px;">
              <el-button
                type="primary"
                size="mini"
                @click="addPay"
              >
              添加资费策略</el-button>
            </div>
            <span class="tariffList">已关联资费策略</span>
            <div class="app-table">
              <el-table :data="tariffList" border style="width: 100%">
                <el-table-column label="策略编号">
                  <template slot-scope="scope">
                    <el-popover v-if="scope.row.tariffId" :content="scope.row.tariffId" placement="top" trigger="hover">
                      <span slot="reference" style="cursor:pointer">{{ scope.row.tariffId }}</span>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column label="资费策略名称">
                  <template slot-scope="scope">
                    <el-popover v-if="scope.row.name" :content="scope.row.name" placement="top" trigger="hover">
                      <span slot="reference" style="cursor:pointer">{{ scope.row.name }}</span>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column label="价格">
                  <template slot-scope="scope">
                    <el-popover v-if="scope.row.price" :content="scope.row.price" placement="top" trigger="hover">
                      <span slot="reference" style="cursor:pointer">{{ scope.row.price }}</span>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column label="计费周期">
                  <template slot-scope="scope">
                    <el-popover v-if="scope.row.cycle" :content="scope.row.cycle" placement="top" trigger="hover">
                      <span slot="reference" style="cursor:pointer">{{ scope.row.cycle }}</span>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column label="计费方式">
                  <template slot-scope="scope">
                    {{ scope.row.realPay }}
                  </template>
                </el-table-column>
                <el-table-column label="是否自动续订">
                  <template slot-scope="scope">
                    {{ scope.row.isGoon === '0' ? '是' : '否' }}
                  </template>
                </el-table-column>
                <el-table-column label="退订锁定期">
                  <template slot-scope="scope">
                    {{ scope.row.lockPeriod }}
                  </template>
                </el-table-column>
                <el-table-column label="计费渠道">
                  <template slot-scope="scope">
                    {{ scope.row.billingChannelName }}
                  </template>
                </el-table-column>
                <el-table-column label="资费策略排序">
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model="scope.row.sequence"
                      placeholder="输入序号"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button
                      type="danger"
                      plain
                      size="mini"
                      round
                      icon="el-icon-third-tongyong"
                      @click="cancelConnect(scope.$index)"
                    >取消关联</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- <div class="pagination-container">
                <el-pagination :current-page="pageid" :page-sizes="[20,50,100]" :page-size="pagecount" :total="count" background  highlight-current-row layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"   @current-change="handleCurrentChange" />
              </div> -->
              <div class="btnArrs">
                <el-button
                  type="primary"
                  size="small"
                  plain
                  round
                  @click="next('first')"
                >上一步</el-button>
                <el-button
                  type="primary"
                  size="small"
                  round
                  @click="next('third')"
                >下一步</el-button>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="产品服务" name="third">
            <div style="margin-bottom: 10px;">
              <el-button
                type="primary"
                size="mini"
                @click="addService"
              >
              添加服务</el-button>
            </div>
            <span class="tariffList">已关联产品服务</span>
            <div class="app-table">
              <el-table :data="serviceList" border style="width: 100%">
                <el-table-column label="服务ID">
                  <template slot-scope="scope">
                    <el-popover v-if="scope.row.serviceId" :content="scope.row.serviceId" placement="top" trigger="hover">
                      <span slot="reference" style="cursor:pointer">{{ scope.row.serviceId }}</span>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column label="服务名称">
                  <template slot-scope="scope">
                    <el-popover v-if="scope.row.name" :content="scope.row.name" placement="top" trigger="hover">
                      <span slot="reference" style="cursor:pointer">{{ scope.row.name }}</span>
                    </el-popover>
                  </template>
                </el-table-column>
                <!-- <el-table-column label="状态">
                  <template slot-scope="scope">
                    <span v-if="scope.row.status === '0'">
                      未提交
                    </span>
                    <span v-if="scope.row.status === '1'">
                      已提交
                    </span>
                    <span v-if="scope.row.status === '2'">
                      废弃
                    </span>
                  </template>
                </el-table-column> -->
                <el-table-column label="服务来源">
                  <template slot-scope="scope">
                    <el-popover v-if="scope.row.serviceSourceName" :content="scope.row.serviceSourceName" placement="top" trigger="hover">
                      <span slot="reference" style="cursor:pointer">{{ scope.row.serviceSourceName }}</span>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column label="节目来源">
                  <template slot-scope="scope">
                    <el-popover v-if="scope.row.serviceSourceType" :content="scope.row.serviceSourceType" placement="top" trigger="hover">
                      <span slot="reference" style="cursor:pointer">{{ scope.row.serviceSourceType }}</span>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button
                      type="danger"
                      plain
                      round
                      size="mini"
                      icon="el-icon-third-tongyong"
                      @click="cancelServiceConnect(scope.$index)"
                    >取消关联</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- <div class="pagination-container">
                <el-pagination :current-page="pageid" :page-sizes="[20,50,100]" :page-size="pagecount" :total="count" background  highlight-current-row layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"   @current-change="handleCurrentChange" />
              </div> -->
              <div class="btnArrs1">
                <el-button
                  type="primary"
                  size="small"
                  plain
                  round
                  @click="next('second')"
                >上一步</el-button>
                <el-button
                  v-show="productType !== '0'"
                  type="primary"
                  size="small"
                  round
                  @click="next('fourth')"
                >下一步</el-button>
                <el-button
                  v-show="productType === '0'"
                  type="primary"
                  size="small"
                  round
                  @click="save"
                >保存</el-button>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="产品优惠" name="fourth">
            <div style="margin-bottom: 10px;">
              <el-button
                type="primary"
                size="mini"
                @click="addPlan"
              >
              关联优惠策略</el-button>
            </div>
            <span class="tariffList">已关联优惠策略</span>

            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span class="bold">基本信息</span>
              </div>
              <el-row>
                <el-col :span="24">
                  <div class="watch">
                    策略名称：{{ referential.name }}
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="watch">
                    策略开始时间：{{ referential.beginTime }}
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="watch">
                    策略结束时间：{{ referential.endTime }}
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="watch">
                    策略描述：{{ referential.description }}
                  </div>
                </el-col>
              </el-row>
            </el-card>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span class="bold">策略触发条件</span>
              </div>
              <el-row>
                <el-col :span="24">
                  <div class="watch">
                    触发条件：{{ referential.triggeringConditionsName }}
                  </div>
                </el-col>
              </el-row>
            </el-card>
            <el-card class="box-card mar">
              <div slot="header" class="clearfix">
                <span class="bold">策略优惠形式</span>
              </div>
              <el-row>
                <el-col :span="24">
                  <div class="watch">
                    优惠形式：{{ referential.preferentialTypeName }}
                  </div>
                </el-col>
                <el-col v-if="referential.preferentialType == 1" :span="24">
                  <div class="watch">
                    折扣比例：{{ referential.discountRatio }} %
                  </div>
                </el-col>
                <el-col v-if="referential.preferentialType == 0" :span="24">
                  <div class="watch">
                    折价金额：{{ referential.discountAmount }} 元
                  </div>
                </el-col>
              </el-row>
            </el-card>
            <div class="btnArrs2">
              <el-button
                type="primary"
                size="small"
                plain
                round
                @click="next('third')"
              >上一步</el-button>
              <el-button
                type="primary"
                size="small"
                round
                @click="save"
              >保存</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl">
    </el-dialog>
    <pay-list :addpay-list="addpayList" :pay-has="payHas" @closePay="closePay" />
    <product-package :product-pack="productPack" :arr-product="arrProduct" :product-typenum="productTypenum" @closeService="closeService" />
    <discounts-plan :add-plana="addPlana" @closeDis="closeDis" />
  </div>
</template>

<script>
import { getSelectS, saveResult, checkName, checkProduct } from '@/api/product.js'
// import { getSelectS } from '@/api/expenses.js'
import { watchInfo } from '@/api/productCheck.js'
import payList from './payList.vue'
import { mapGetters } from 'vuex'
import { numAndWord, positive } from '@/utils/validate.js'
import productPackage from './productPackage.vue'
import discountsPlan from './discounts.vue'
export default {
  name: 'Watch',
  components: {
    payList: payList,
    productPackage: productPackage,
    discountsPlan: discountsPlan
  },
  props: {
    editDialog: {
      type: Boolean,
      default: false
    },
    proId: {
      type: String,
      default: ''
    },
    keyId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      urlzz: window.configs.API_BCBS + '/product/getFTPUrl.do',
      dialogImageUrl: '',
      arrProduct: [],
      productTypenum: '',
      showImg: [],
      realStatus: false,
      payHas: [],
      productCategoryArr: [], // 产品类别
      addPlana: false, // 优惠策略遮罩
      productPack: false, // 服务包遮罩
      addpayList: false, // 新增资费列表
      pageCode: 'first',
      payStyles: [],
      realPay: '',
      imgArr: [], // 图片标识数组
      dialogVisible: false,
      disabled: false,
      activeName: 'first',
      triggeringConditionsArr: [],
      preferentialTypeArr: [],
      sequence: '', // 排序
      typeArr: [], // 产品类型下拉
      productCp: [], // 产品cp
      platformArr: [], // 所属平台下拉
      showPointDialog: false, // 遮罩
      name: '', // name
      productCategory: '', // 产品类别
      productType: '', // type
      description: '', // description
      sourceArr: [],
      platformList: [], // 产品平台所属关系
      platformListArr: [],
      cpList: [], // 产品cp关系
      cpListArr: [],
      serviceTypeArr: [],
      imageList: [], // 图片list
      linkList: [{
        productLink: '',
        linkIdentifier: ''
      }], // 产品链接list
      tariffList: [], // 产品资费策略关系
      serviceList: [], // 产品服务关系
      referential: {},
      preferentialTariffBean: [] // 产品优惠资费策略实体
    }
  },
  computed: {
    ...mapGetters(['plat'])
  },
  watch: {
    editDialog(newVal) {
      this.showPointDialog = newVal
      this.id = this.keyId
      this.productId = this.proId
      if (newVal) {
        this.platformArr = this.plat
        this.platformArr.forEach(item => {
          var len = item.powerCode.lastIndexOf('-')
          item.idVal = item.powerCode.substr(len + 1)
        })
        this.realStatus = false
        // this.loadSelect()
        // this.loadSelect1()
        this.getSelectAll()
        this.loadInfo(this.id, this.productId)
      }
    }
  },
  methods: {
    getSelectAll() {
      // 节目来源
      var data = {
        functionType: 'programSource'
      }

      // 服务来源
      var data1 = {
        functionType: 'serviceSource'
      }

      getSelectS(data).then(res => {
        if (res.resultCode === '0000') {
          this.serviceTypeArr = res.data.list
        }
      })
      getSelectS(data1).then(res => {
        this.sourceArr = res.data.list
      })
    },
    // 得到信息
    loadInfo() {
      var data = {
        id: this.id,
        productId: this.productId
      }
      // 产品类型
      var data33 = {
        functionType: 'productType'
      }
      getSelectS(data33).then(res => {
        this.typeArr = res.data.list
      })
      // 所属平台
      /* var plat = {
        functionType: 'platform'
      } */
      // getSelectS(plat).then(res => {
      // this.platformArr = res.data.list
      // 获取下拉框计费方式
      getSelectS({ functionType: 'billingMode' }).then(res => {
        console.log(res)
        this.payStyles = res.data.list
        // 产品cp realPay
        var cp = {
          functionType: 'cp'
        }
        getSelectS(cp).then(res => {
          this.productCp = res.data.list
          // 产品类别
          var typess = {
            functionType: 'productCategory'
          }
          getSelectS(typess).then(res => {
            this.productCategoryArr = res.data.list
            // 优惠形式
            var cps = {
              functionType: 'preferentialType'
            }
            getSelectS(cps).then(res => {
              this.preferentialTypeArr = res.data.list
              console.log(this.preferentialTypeArr)
              // 策略触发条件
              var data22 = {
                functionType: 'triggeringConditions'
              }
              getSelectS(data22).then(res => {
                this.triggeringConditionsArr = res.data.list
                watchInfo(data).then(res => {
                  const data2 = res.data
                  this.name = data2.name // 产品名称
                  this.sequence = data2.sequence
                  this.productType = data2.productType // 产品类型
                  this.productCategory = data2.productCategory // 产品类别
                  this.description = data2.description // 描述
                  this.createTime = data2.createTime // 创建日期
                  this.reviewDate = data2.reviewDate // 审核日期
                  if (data2.platformList.length > 0) {
                    this.platformListArr = data2.platformList.map(item => {
                      return item.platformId
                    }) // 所属平台数组
                  }
                  if (data2.cpList.length > 0) {
                    this.cpList = data2.cpList.map(item => {
                      return item.cpId
                    }) // 产品所属cp关系
                    /* var arrz = []
                    data2.cpList.forEach(item => {
                      var data = {
                        cpName: item.cpName,
                        cpId: item.cpId
                      }
                      arrz.push(data)
                    })
                      this.cpList = arrz
                      console.log(arrz) */
                  }
                  if (data2.imageList.length > 0) {
                    // this.imageList = data2.imageList // 产品图片关系
                    var datass = []
                    var datazz = []
                    data2.imageList.forEach(item => {
                      var num1 = {
                        name: item.imageLogo,
                        url: item.imageUrl
                      }
                      var num = {
                        imageLogo: item.imageLogo,
                        imageUrl: item.imageUrl
                      }
                      datass.push(num)
                      datazz.push(num1)
                    })
                    this.showImg = datazz
                    this.imgArr = datass // 产品图片关系
                  }
                  if (data2.imageList.length === 0) {
                    this.showImg = []
                    this.imgArr = []
                  }
                  if (data2.linkList.length > 0) {
                    this.linkList = data2.linkList // 产品链接关系
                  }
                  if (data2.tariffList.length > 0) {
                    this.tariffList = data2.tariffList // 产品资费策略
                    this.payStyles.forEach(item => {
                      this.tariffList.forEach(num => {
                        if (num.mode === item.typeId) {
                          num.realPay = item.typeName
                        }
                      })
                    })
                  }
                  if (data2.serviceList.length > 0) {
                    this.serviceList = data2.serviceList // 产品服务list
                    this.serviceList.forEach(item => {
                      this.sourceArr.forEach(num => {
                        // 服务来源
                        if (num.typeId === item.source) {
                          item.serviceSourceName = num.typeName
                        }
                      })
                    })
                    this.serviceList.forEach(item => {
                      this.serviceTypeArr.forEach(num => {
                        // 节目来源
                        if (num.typeId === item.source) {
                          item.serviceSourceType = num.typeName
                        }
                      })
                    })
                  }
                  if (data2.preferentialTariffBean) {
                    this.preferentialTariffBean = data2.preferentialTariffBean // 优惠资费list
                    this.referential = data2.preferentialTariffBean
                    this.triggeringConditionsArr.forEach(item => {
                      if (item.typeId === this.preferentialTariffBean.triggeringConditions) {
                        this.referential.triggeringConditionsName = item.typeName
                      }
                    })
                    this.preferentialTypeArr.forEach(item => {
                      if (item.typeId === data2.preferentialTariffBean.preferentialType) {
                        this.referential.preferentialTypeName = item.typeName
                        console.log(item.typeName)
                      }
                    })
                  }
                  // this.cpproductId = data2.cpproductId // 运营商标识
                })
              })
            })
          })
        })
      })
      // })
    },
    // 状态校验
    isHint(val) {
      if (val) {
        console.log(this.serviceList)
        if (this.serviceList.length > 0) {
          this.$confirm('产品已关联了基础服务，修改产品类型将会清空目前已关联的服务，并需要您重新关联服务。确定进行修改吗？', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '放弃修改'
          }).then(() => {
            this.serviceList = []
          }).catch(action => {
            console.log('cancel')
          })
        }
      }
    },
    // 保存
    save() {
      var perfer = {
        id: this.referential.id,
        preferentialTariffId: this.referential.tariffId,
        preferentialTariffName: this.referential.name
      }
      this.platformArr.forEach(val => {
        this.platformListArr.forEach(item => {
          if (item === val.idVal) {
            this.platformList.push({
              platformId: val.idVal,
              platformName: val.powerName
            })
          }
        })
      })
      var result = {
        id: this.id,
        sequence: this.sequence,
        productId: this.productId,
        name: this.name,
        productType: this.productType,
        productCategory: this.productCategory,
        description: this.description,
        platformList: this.platformList,
        cpList: this.cpListArr,
        imageList: this.imgArr,
        linkList: this.linkList,
        tariffList: this.tariffList,
        serviceList: this.serviceList,
        preferentialTariffBean: this.productType === '0' ? {} : perfer
      }
      saveResult(result).then(res => {
        console.log(res)
        if (res.resultCode === '0000') {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.check(true)
          this.referential = {}
        }
      })
    },
    // 添加产品服务
    addService() {
      this.productPack = true
      this.productTypenum = this.productType
      this.arrProduct = this.serviceList
    },
    // 取消关联
    cancelConnect(index) {
      console.log(index)
      this.$confirm('确认取消关联吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tariffList.splice(index, 1)
        this.$message({
          type: 'success',
          message: '取消成功!'
        })
      }).catch(() => {
        console.log('取消')
      })
    },
    cancelServiceConnect(index) {
      console.log(index)
      this.$confirm('确认取消关联吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.serviceList.splice(index, 1)
        this.$message({
          type: 'success',
          message: '取消成功!'
        })
      }).catch(() => {
        console.log('取消')
      })
    },
    // 资费策略回调
    closePay(val) {
      this.addpayList = false
      // var middle = []
      // 数组查重 去重 并值
      if (Array.isArray(val) && val.length > 0) {
        // 解决保存不显示问题
        val.forEach(num => {
          num.realPay = num.mode
        })
        /* if (this.tariffList.length > 0) {
          var repeatArr = val.concat(this.tariffList)
          for (let i = 0; i < repeatArr.length; i++) {
            var flag = true // 状态值
            for (let j = 0; j < middle.length; j++) {
              if (repeatArr[i].tariffId === middle[j].tariffId) {
                flag = false
              }
            }
            if (!flag) {
              middle.push(repeatArr[i])
            }
          }
          console.log(middle)
          this.tariffList = middle
        } else {
          } */
        this.tariffList.push(...val)
      }
    },
    // 服务包回调
    closeService(val) {
      console.log(val)
      this.productPack = false
      if (Array.isArray(val) && val.length > 0) {
        val.forEach(item => {
          item.serviceSourceName = item.source
          item.serviceSourceType = item.programSource
        })
        this.serviceList.push(...val)
      }
    },
    // 优惠策略回调
    closeDis(val) {
      this.addPlana = false
      console.log(val)
      this.referential = val
      this.referential.preferentialTypeName = val.preferentialType
      this.referential.triggeringConditionsName = val.triggeringConditions
      this.referential.preferentialType = val.remark
      console.log(val.remark)
    },
    addPlan() {
      this.addPlana = true
    },
    // 添加资费策略
    addPay() {
      this.addpayList = true
      this.payHas = this.tariffList
    },
    handle(val) {
      var labels = []
      for (let i = 0; i < this.productCp.length; i++) {
        for (let j = 0; j < val.length; j++) {
          if (val[j] === this.productCp[i].typeId) {
            var data = {
              cpId: this.productCp[i].typeId,
              cpName: this.productCp[i].typeName
            }
            labels.push(data)
          }
        }
      }
      this.cpListArr = labels
    },
    handlePlat(val, index) {
      if (index > 0) {
        console.log(this.platformList)
        var middleArr = []
        for (var i = 0; i < this.platformList.length; i++) {
          if (middleArr.indexOf(this.platformList[i].platformId) < 0) {
            middleArr.push(this.platformList[i].platformId)
          }
        }
        if (middleArr.length !== this.platformList.length) {
          this.$message({
            message: '该所属平台已经存在，请重新选择！',
            type: 'error'
          })
          this.platformList.pop()
          return false
        }
      }
      var middle = {}
      middle = this.platformArr.find(item => {
        return item.idVal === val
      })
      this.platformList[index].platformName = middle.powerName
    },
    handleRemove(file, fileList) {
      this.imgArr.pop()
    },
    handleSuccess(response, file, fileList) {
      var url = response.data.ftpUrl
      this.imgArr.push({
        imageUrl: url,
        imageLogo: ''
      })
    },
    handlePictureCardPreview(file) {
      console.log(file.url)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 新增平台
    addPlat() {
      this.platformList.push({
        platformId: '',
        platformName: '',
        cpproductId: ''
      })
    },
    reduce(index) {
      this.platformList.splice(index, 1)
    },
    addLink() {
      this.linkList.push({
        platformId: '',
        platformName: '',
        cpproductId: ''
      })
    },
    reduceLink(index) {
      this.linkList.splice(index, 1)
    },
    // 下一页
    next(val, add) {
      if (val === 'second' && add) {
        if (!this.name) {
          this.$message({
            type: 'error',
            message: '产品名称不能为空'
          })
          this.realStatus = false
          return false
        }

        if (!this.productType) {
          this.$message({
            type: 'error',
            message: '产品类型不能为空'
          })
          this.realStatus = false
          return false
        }

        if (!this.productCategory) {
          this.$message({
            type: 'error',
            message: '产品类别不能为空'
          })
          this.realStatus = false
          return false
        }

        if (this.sequence && !positive(this.sequence)) {
          this.$message({
            type: 'error',
            message: '排序号必须为正整数'
          })
          this.realStatus = false
          return false
        }

        // var platArrs = []
        if (this.platformListArr.length < 1) {
          this.$message({
            type: 'error',
            message: '产品所属平台不能为空'
          })
          this.realStatus = false
          return false
        }
        /* for (let i = 0; i < this.platformList.length; i++) {
          if (!this.platformList[i].cpproductId) {
            this.$message({
              type: 'error',
              message: '运营商产品标识不能为空'
            })
            this.realStatus = false
            return false
          }
          if (!numAndWord(this.platformList[i].cpproductId)) {
            this.$message({
              type: 'error',
              message: '运营商产品标识只能输入英文字母、数字或字母和数字的组合！'
            })
            this.realStatus = false
            return false
          }
          if (!this.platformList[i].platformId) {
            this.$message({
              type: 'error',
              message: '产品所属平台不能为空'
            })
            this.realStatus = false
            return false
          } */
        // }
        /* if (platArrs.length !== this.platformList.length) {
          this.$message({
            type: 'error',
            message: '运营商产品标识不可重复！'
          })
          this.realStatus = false
          return false
        } */
        if (this.cpListArr.length === 0) {
          // productCp
          if (this.cpList.length === 0) {
            this.$message({
              type: 'error',
              message: '产品所属CP不能为空'
            })
            this.realStatus = false
            return false
          } else {
            for (let i = 0; i < this.productCp.length; i++) {
              for (let j = 0; j < this.cpList.length; j++) {
                if (this.cpList[j] === this.productCp[i].typeId) {
                  var data = {
                    cpId: this.productCp[i].typeId,
                    cpName: this.productCp[i].typeName
                  }
                  this.cpListArr.push(data)
                }
              }
            }
            console.log(this.cpListArr)
          }
        }
        console.log(this.cpListArr)
        var imgArrr = []
        for (let i = 0; i < this.imgArr.length; i++) {
          if (!this.imgArr[i].imageLogo) {
            this.$message({
              type: 'error',
              message: '图片标识不能为空'
            })
            this.realStatus = false
            return false
          }
          if (!numAndWord(this.imgArr[i].imageLogo)) {
            this.$message({
              type: 'error',
              message: '图片标识只能输入英文字母、数字或字母和数字的组合！'
            })
            this.realStatus = false
            return false
          }
          if (imgArrr.indexOf(this.imgArr[i].imageLogo) < 0) {
            imgArrr.push(this.imgArr[i].imageLogo)
          }
        }
        if (imgArrr.length !== this.imgArr.length) {
          this.$message({
            type: 'error',
            message: '图片标识不能重复！'
          })
          this.realStatus = false
          return false
        }
        // var platArr = this.platformList.map(item => {
        //   return item.platformId
        // })
        checkName({
          name: this.name,
          id: this.id,
          platformId: this.platformListArr.join(',')
          // platformId: platArr.join(',')
        }).then(res => {
          if (res.resultCode === '0000') {
            // 校验产品链接标识
            var links
            links = this.linkList.map(item => {
              if (item.productLink) {
                return item.productLink
              }
            })
            if (this.linkList.length === 1) {
              if (this.linkList[0].linkIdentifier && !this.linkList[0].productLink) {
                if (!numAndWord(this.linkList[0].productLink)) {
                  this.$message({
                    type: 'error',
                    message: '产品链接只能输入英文字母、数字或字母和数字的组合！'
                  })
                  this.realStatus = false
                  return false
                }
                this.$message({
                  message: '产品链接为必填项',
                  type: 'error'
                })
                this.realStatus = false
                return false
              }
              if (this.linkList[0].productLink) {
                checkProduct({ productLink: links.join(','), productId: this.productId }).then(res => {
                  if (res.resultCode === '0000') {
                    this.realStatus = true
                    this.activeName = val
                  } else {
                    this.realStatus = false
                    console.log(3)
                    return false
                  }
                })
              } else {
                this.realStatus = true
                this.activeName = val
              }
            }
            if (this.linkList.length > 1) {
              var linkIdentifierArr = []
              var productLinkArr = []
              for (let z = 0; z < this.linkList.length; z++) {
                if (!this.linkList[z].productLink) {
                  this.$message({
                    message: '产品链接为必填项',
                    type: 'error'
                  })
                  this.realStatus = false
                  return false
                }
                if (!numAndWord(this.linkList[z].productLink)) {
                  this.$message({
                    type: 'error',
                    message: '产品链接只能输入英文字母、数字或字母和数字的组合！'
                  })
                  this.realStatus = false
                  return false
                }
                if (!this.linkList[z].linkIdentifier) {
                  this.$message({
                    message: '产品链接大于一条时，链接标识为必填项',
                    type: 'error'
                  })
                  this.realStatus = false
                  return false
                }
                if (!numAndWord(this.linkList[z].linkIdentifier)) {
                  this.$message({
                    type: 'error',
                    message: '链接标识只能输入英文字母、数字或字母和数字的组合！'
                  })
                  this.realStatus = false
                  return false
                }
                if (linkIdentifierArr.indexOf(this.linkList[z].linkIdentifier) < 0) {
                  linkIdentifierArr.push(this.linkList[z].linkIdentifier)
                }
                if (productLinkArr.indexOf(this.linkList[z].productLink) < 0) {
                  productLinkArr.push(this.linkList[z].productLink)
                }
              }
              if (productLinkArr.length !== this.linkList.length) {
                this.$message({
                  message: '产品链接不可重复！',
                  type: 'error'
                })
                this.realStatus = false
                return false
              }
              if (linkIdentifierArr.length !== this.linkList.length) {
                this.$message({
                  message: '链接标识不可重复！',
                  type: 'error'
                })
                this.realStatus = false
                return false
              }
              checkProduct({ productLink: links.join(','), productId: this.productId }).then(res => {
                console.log(res)
                if (res.resultCode === '0000') {
                  this.realStatus = true
                  this.activeName = val
                } else {
                  this.realStatus = false
                  return false
                }
              })
            }/*  else {
              console.log(4)
              this.realStatus = true
              this.activeName = val
            } */
          } else {
            this.realStatus = false
            return false
          }
        })
      }
      if (val === 'second' && !add) {
        this.realStatus = true
        this.activeName = val
      }
      if (val === 'first') {
        this.realStatus = true
        this.activeName = val
      }
      if (val === 'third') {
        if (this.tariffList.length === 0) {
          this.$message({
            type: 'error',
            message: '请至少关联一项资费策略'
          })
          this.realStatus = false
          return false
        }
        for (let i = 0; i < this.tariffList.length; i++) {
          if (!this.tariffList[i].sequence) {
            this.$message({
              type: 'error',
              message: '请填写排序号'
            })
            this.realStatus = false
            return false
          }
        }
        this.realStatus = true
        this.activeName = val
      }
      if (val === 'fourth') {
        if (this.serviceList.length === 0) {
          this.$message({
            type: 'error',
            message: '请至少关联一项产品服务'
          })
          this.realStatus = false
          return false
        }
        this.realStatus = true
        this.activeName = val
      }
      /* if (val === 'second' && !add) {
        this.activeName = val
      } */
    },
    // 得到信息
    /* loadSelect1() {
      // 优惠形式
      var cp = {
        functionType: 'preferentialType'
      }
      getSelectS(cp).then(res => {
        this.preferentialTypeArr = res.data.list
        console.log(this.preferentialTypeArr)
      })
      // 策略触发条件
      var data = {
        functionType: 'triggeringConditions'
      }
      getSelectS(data).then(res => {
        this.triggeringConditionsArr = res.data.list
      })
    }, */
    // 回调父组件
    check(val) {
      /* this.platformList.splice(1, this.platformList.length)
      this.linkList.splice(1, this.linkList.length) */
      this.$refs.upload.clearFiles()
      this.showPointDialog = false
      this.name = ''
      this.type = ''
      this.cpListArr = []
      this.description = ''
      this.platformList = [] // 产品平台所属关系
      this.platformListArr = []
      this.cpList = []
      this.imageList = []
      this.linkList = [{
        productLink: '',
        linkIdentifier: ''
      }] // 产品链接list
      this.tariffList = []
      this.serviceList = []
      this.preferentialTariffBean = {}
      this.$emit('closeEdit', val)
      setTimeout(() => {
        this.activeName = 'first'
        this.realStatus = true
      }, 100)
    },
    // 校验
    getStatus() {
      if (this.realStatus) {
        this.realStatus = false
        return true
      } else {
        return false
      }
    },
    handleClick(val) {
      var code = this.pageCode
      if (code === 'first' && val.name === 'second') {
        console.log(val.name)
      }
    }
  }
}
</script>

<style scoped>
.content{
  width: 95%;
}
.textaa{
  display: flex;
  align-items: center;
}
.el-icon-circle-plus, .el-icon-circle-close{
  font-size: 20px;
  color: #409EFF;
  margin-left: 8px;
  margin-top: 2px;
  cursor: pointer;
  vertical-align: middle;
}
.el-icon-circle-close{
  color: #F56C6C;
  margin-left: 10px;
}
</style>
<style>
.el-dialog__body{
  padding: 20px;
}
.app-table{
  margin-bottom: 50px;
}
#tab-first::after{
  content: '';
  background-color: #c0c4cc;
  transform: rotate(-45deg) translateY(-4px);
  transform-origin: 0 0;
  position: absolute;
  height: 15px;
  width: 1px;
  display: inline-block;
  right: 0;
  bottom: 13px;
}
#tab-first::before{
  content: '';
  background-color: #c0c4cc;
  transform: rotate(45deg) translateY(4px);
  transform-origin: 100% 100%;
  position: absolute;
  height: 15px;
  width: 1px;
  display: inline-block;
  right: 0;
  bottom: 12px;
}
#tab-second::after{
  content: '';
  background-color: #c0c4cc;
  transform: rotate(-45deg) translateY(-4px);
  transform-origin: 0 0;
  position: absolute;
  height: 15px;
  width: 1px;
  display: inline-block;
  right: 0;
  bottom: 13px;
}
#tab-second::before{
  content: '';
  background-color: #c0c4cc;
  transform: rotate(45deg) translateY(4px);
  transform-origin: 100% 100%;
  position: absolute;
  height: 15px;
  width: 1px;
  display: inline-block;
  right: 0;
  bottom: 12px;
}
.air::before{
   margin-right: 13px;
   content: " ";
}
#tab-third::after{
  content: '';
  background-color: #c0c4cc;
  transform: rotate(-45deg) translateY(-4px);
  transform-origin: 0 0;
  position: absolute;
  height: 15px;
  width: 1px;
  display: inline-block;
  right: 0;
  bottom: 13px;
}
#tab-third::before{
  content: '';
  background-color: #c0c4cc;
  transform: rotate(45deg) translateY(4px);
  transform-origin: 100% 100%;
  position: absolute;
  height: 15px;
  width: 1px;
  display: inline-block;
  right: 0;
  bottom: 12px;
}
.watch{
  margin: 10px 0;
}
.box-card{
  margin-top: 10px;
}
.box-card1{
  margin-top: 10px;
}
.box-card2{
  margin-top: 10px;
  margin-bottom: 45px;
}
.watch{
  margin: 10px 0;
}
.bold{
  font-weight: bold;
}
.el-card__header{
  padding: 9px 20px !important;
}
.productCP{
  display: inline-block;
  margin: 0 5px;
}
.el-card__body{
  padding: 10px 20px;
}
.imgArr{
  display: flex;
  justify-content: flex-start;
}
.imgList{
  display: flex;
  width: 100px;
  flex-direction: column;
}
.imgItem{
  width: 90px;
  height: 90px;
  margin: 0 5px;
}
.productImgWord{
  margin-top: 65px;
  height: 49px;
  vertical-align: middle;
  display: inline-block;
}
.imgWord{
  margin-top: 5px;
  display: inline-block;
}
.btnFatcher{
  position: relative;
}
.btnArrs{
  display: flex;
  justify-content: flex-end;
  width: 200px;
  position: absolute;
  right: 0;
  bottom: -45px;
}
.btnArrs1{
  display: flex;
  justify-content: flex-end;
  width: 200px;
  position: absolute;
  right: 0;
  bottom: 6px;
}
.btnArrs2{
  display: flex;
  justify-content: flex-end;
  width: 200px;
  position: absolute;
  right: 0;
  bottom: 2px;
}
.mar{
  margin-bottom: 55px;
}
.tariffList{
  margin: 5px 0 19px 0;
  font-weight: bold;
}
.bold{
  font-weight: bold;
}
.required::before{
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
.imgArrs{
  display: inline-block;
  width: 148px;
  margin: 0 4px;
}
.imgArrs:nth-child(1) {
  margin-left: 10px;
}
</style>
